<template>
        <div id="myChart" :style="{width: '278px', height: '650px'}"></div>
</template>

<script>
    export default {
        name: 'city_17',
        data() {
            return {
                cityName: [],
                adopt: [],
                reject: [],
                wait: []
            }
        },
        mounted(){
            this.getData()
        },
        methods: {
            drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                // 绘制图表
                myChart.setOption({
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['通过', '待审核','驳回'],
                        bottom:"0px",
                        textStyle: {
                            color: "#fff"
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis:  {
                        show:false
                    },
                    yAxis: {
                        type: 'category',
                        data: this.cityName,
                        axisLabel:{
                            color:"#fff"
                        }
                    },
                    series: [
                        {
                            name: '通过',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                show: false,
                            },
                            data: this.adopt
                        },
                        {
                            name: '待审核',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                show: false,
                            },
                            data: this.wait
                        },
                        {
                            name: '驳回',
                            type: 'bar',       
                            stack: '总量',
                            label: {
                                show: false,
                            },
                            data: this.reject
                        }
                    ]
                });
            },
            getData(){
                this.$axios.get('http://mock.eolinker.com/bKf2Q8gb0f50e0e855912c22d144f9cd183dc156574fd1f?uri=city')
                .then(response=>{
                    let city_data = response.data.data.reverse()
                    for( var i = 0; i < city_data.length; i++){
                        let cityName = response.data.data[i].cityName;
                        this.cityName.push(cityName)
                        let adopt = response.data.data[i].adopt;
                        this.adopt.push(adopt)
                        let reject = response.data.data[i].reject;
                        this.reject.push(reject)
                        let wait = response.data.data[i].wait;
                        this.wait.push(wait)
                    }
                    this.drawLine()
                })
                .catch(error=>{
                    console.log(error);
                    alert('网络错误，不能访问');
                })
            }
        }
    }
</script>

<style scoped>
    #myChart{
        margin-top: 10px;
    }
</style>